<html>
        <head>
            <title>001小球粘合效果</title>
            <meta charset="utf-8">
            <style>
                a:link, a:visited, a:hover, a:active{
                    color: #2C58E7;
                    text-decoration: none;
                }
                html, body{
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
                #container{
                    position: relative;
                    margin: 0 auto;
                    top: 50%;
                    transform: translateY(-50%);

                    width: 800px;
                    height: 500px;
                    background-color: #ccc;
                    border: 1px solid black;

                    filter: contrast(30);
                }

                #ball1{
                    position: absolute;
                    margin-left: 20px;
                    top: 50%;
                    left: 50%;
                    transform: translateY(-50%) translateX(-50%);

                    width: 100px;
                    height: 100px;
                    background-color: black;
                    border-radius: 50%;

                    filter: blur(10px);
                    animation: ball1_move 4s infinite ease-in-out;
                }

                #ball2{
                    position: absolute;
                    margin-left: -20px;
                    top: 50%;
                    left: 50%;
                    transform: translateY(-50%) translateX(-50%);

                    width: 100px;
                    height: 100px;
                    background-color: blue;
                    border-radius: 50%;

                    filter: blur(10px);
                    animation: ball2_move 4s infinite ease-in-out;
                }

                @keyframes ball1_move{
                    0% {
                        margin-left: -70px;
                    }
                    50% {
                        margin-left: 70px;
                    }
                    100% {
                        margin-left: -70px;
                    }
                }

                @keyframes ball2_move{
                    0% {
                        margin-left: 70px;
                    }
                    50% {
                        margin-left: -70px;
                    }
                    100% {
                        margin-left: 70px;
                    }
                }
                
            </style>
        </head>
    
        <body>
            <div id="container">
                <div id="ball1">1</div>
                <div id="ball2">2</div>
            </div>
        </body>
    </html>